<template>
    <div class="containe" style="background-color: #f0f0f0;">
        <div class="cp-container">
            <qiaoNav></qiaoNav>
            <div class="allClassification">
                <span @click="gohosy" class="addcur">全部分类>{{listitem.nav}}</span>
            </div>

            <!-- 类型 -->
            <div v-if="iszb">
                <div class="details">
                    <div class="anth-box">
                        <span v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'" class="authentication">能力服务</span>
                        <span class="authentication" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'" style="background-color: #a7cddc;">设备租赁</span>
                        <span class="authentication" v-if="listitem.supplyDemandType==='LABOR_FORCE'" style="background-color: #dbc1a4;">劳动力</span>
                        <span class="build-titles">{{listitem.demandName}}</span>
                        <collection :collectionSourceId="listitem.id" :classId="listitem.demandClassId" :collectionType="'DEMAND_NEEDS'" :shopType="'BPSC'">
                            <span slot-scope="isColl" class="span-btn-item staroff">
                                <i :class="`icon icon-collection${isColl.data ? '_hover' : ''}`"></i>
                                {{isColl.data ? '取消收藏' : '收藏需求'}}
                            </span>
                        </collection>
                        <shareTooltip class="share"></shareTooltip>
                    </div>
                    <div class="contents">
                        <span class="demainfo">详情:{{listitem.demandInfo}}</span>
                    </div>
                    <div class="amount">
                        <span class="ordinary" v-if="listitem.discussionFlag===1">预算金额 <i class="ifont"> 商议 </i></span>
                        <span class="ordinary" v-else>预算金额 <i class="ifont"> {{tofloat(listitem.demandBudget)}} </i></span>
                        <span class="ordinary" v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'"> 期望工期 <i class="ifont"> {{listitem.expectedDuration}}天 </i></span>
                        <span class="ordinary" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'"> 租赁时间 <i class="ifont"> {{listitem.demandLeaseStartTime + '至' + listitem.demandLeaseEndTime}} </i></span>
                        <span class="ordinary" v-if="listitem.supplyDemandType==='LABOR_FORCE'"> 雇佣时间 <i class="ifont"> {{listitem.demandHireStartTime + '至' + listitem.demandHireEndTime}} </i></span>
                        <span class="ordinary">地址 <i class="ifont">{{listitem.demandLocationProvince}} {{listitem.demandLocationCity}}  {{listitem.demandAddress}} </i></span>
                        <span class="flrt" style="color:#11a9e8;cursor: pointer;" @click="todownload" v-if="showdown">资料下载</span>
                    </div>
                    <div class="bidding">
                        <span v-if="listitem.matchStatus==='FINISH'">已完成</span>
                        <span v-else>招标剩余时间{{listitem.surplusDays}}天</span>
                        <span class="flrt">{{listitem.createUserName}} {{listitem.createDate}}</span>
                    </div>
                    <div class="offer">
                        <span class="immediately" style="background-color:#e3e3e3;color: #fff;" v-if="listitem.matchStatus==='FINISH'">已结束</span>
                        <span class="immediately" style="background-color:#e3e3e3;color: #fff;" v-if="listitem.matchStatus==='OVERDUE'">已结束</span>
                        <span class="immediately" style="background-color:#e3e3e3;color: #fff;" v-if="listitem.demandStatus==='OFF_LINE'">已下架</span>
                        <span class="immediately" v-if="listitem.matchStatus==='MATCHING'&&listitem.demandStatus!=='OFF_LINE'" @click="handleBidding">立即报价</span>
                        <span class="span-btn-item" @click="open53Server">
                            <i class="icon icon-weixin_hover"></i>
                            <i class="icon icon-weixin"></i>
                            联系TA
                        </span>
                        <span @click="gettel(listitem.demandContactMobile)" v-if="listitem.openMobileFlag==1">
                            <span class="contact" @mouseleave="dohovers"> <svg v-if="isHovers" @mouseenter="gohovers" class="wewhat" t="1589953833386" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8551" width="16" height="16"><path d="M0.73451 216.631062c0.511265-33.232257 4.090124-60.329328 17.383026-85.892603 4.090124-7.668982 9.202779-15.337965 15.337965-21.47315 17.383027-18.405558 34.766053-36.29985 52.660345-54.194142 19.939354-19.939354 42.435036-36.811115 69.020842-47.036425 21.473151-8.180248 43.457567-10.22531 65.953248-5.623921 29.653398 5.62392 53.682876 20.961885 75.156027 40.90124 32.209726 29.653398 57.261735 64.930717 79.246151 102.764363 11.759106 20.45062 19.939354 41.92377 23.518213 64.930717 5.112655 33.232257-2.045062 63.908186-22.495682 90.493992-15.337965 19.939354-32.720991 37.833646-50.104018 55.727939-6.646451 6.646451-7.668982 12.270372-4.601389 20.961885 7.157717 21.984416 18.916823 41.412505 32.720991 59.306797 19.428089 25.052009 40.389974 49.592753 61.863124 73.62223 20.961885 23.518213 42.946301 45.502629 64.930718 67.487045 16.360496 15.84923 32.720991 31.69846 50.104018 46.52516 31.187195 26.585806 62.885655 53.682876 100.719301 70.554637 6.646451 3.067593 14.315434 5.112655 21.473151 6.646452 2.556327 0.511265 6.646451-1.533796 8.691513-3.578859 9.714044-9.202779 18.916823-18.916823 28.630868-28.630867 13.804168-13.292903 28.630867-26.07454 45.502628-34.254788 21.984416-10.736575 44.991363-15.337965 70.043372-12.270372 30.675929 3.578858 57.773 15.337965 82.82501 32.209726 21.984416 14.315434 42.946301 29.653398 63.396921 46.52516 23.518213 18.916823 42.946301 41.92377 56.239204 69.532106 9.714044 19.939354 14.315434 40.901239 12.270371 63.396921-2.556327 28.630867-13.804168 54.705407-32.209725 76.689824-17.894292 20.961885-36.811115 40.901239-56.239204 60.329328-12.781637 12.270372-24.540744 25.563275-41.412505 34.254788-15.337965 7.668982-31.187195 13.292903-48.058956 14.826699-11.247841 1.022531-23.006947 3.067593-34.766054 2.556327-23.518213-1.533796-47.547691-4.090124-70.554637-8.180248-37.322381-7.157717-73.110965-19.428089-107.877019-34.254788-34.254788-14.826699-67.487045-30.675929-98.674239-50.615283-25.052009-15.84923-50.104018-31.187195-74.644762-48.058956-20.45062-13.804168-39.878708-29.142133-59.306797-44.480098-22.495682-18.405558-44.991363-37.322381-66.464514-57.261735-22.495682-20.45062-44.480098-41.92377-65.953248-63.396921-17.894292-17.894292-34.766053-37.322381-51.126549-56.239204-27.608336-32.720991-55.216673-65.953248-78.734885-102.253098-19.939354-30.675929-39.878708-61.863124-58.284266-93.561584-24.540744-42.946301-44.991363-88.44893-58.795532-135.996621C10.959819 305.079992 5.847164 280.027983 1.245775 254.975974c0-15.84923 0-29.653398-0.511265-38.344912z m69.020841-4.090124c0.511265 9.202779 0 17.894292 2.045062 27.097071 4.601389 23.006947 9.202779 46.013894 15.84923 67.99831 11.759106 40.389974 29.142133 78.734886 49.592753 115.546001 12.781637 23.006947 25.563275 45.502629 39.878708 67.487045 24.029478 37.833646 50.104018 73.622231 79.757416 107.877018 20.961885 24.029478 41.412505 48.058956 63.396921 71.065903 20.961885 21.984416 42.946301 41.92377 64.930717 62.885656 13.292903 12.270372 27.097071 24.540744 41.412505 36.299849 26.585806 20.961885 53.171611 42.435036 81.291213 62.37439 40.901239 28.630867 83.84754 54.194142 129.350169 75.156027 32.720991 15.337965 65.953248 28.630867 100.719302 37.322381 26.585806 7.157717 53.171611 11.759106 80.268682 11.247841 4.090124 0 7.668982-1.022531 11.759106-1.022531 16.360496-1.533796 32.209726-5.62392 43.457567-18.916823 3.578858-4.090124 7.668982-8.180248 11.759106-11.759106 22.495682-20.45062 44.480098-40.901239 60.329328-66.97578 8.691513-14.315434 12.270372-30.164664 6.135186-46.525159-4.601389-12.270372-11.759106-23.518213-20.961885-32.720992-12.781637-12.270372-26.07454-24.540744-39.367443-35.788584-20.45062-16.871761-42.435036-30.675929-66.464514-41.412505-24.540744-10.736575-47.036425-10.22531-67.487045 8.180248-16.871761 14.826699-32.720991 30.675929-49.081487 46.013894-1.533796 1.533796-3.578858 3.578858-5.62392 4.60139-15.84923 10.22531-32.209726 15.337965-51.126549 13.804168-18.405558-1.533796-35.788584-6.646451-52.14908-14.315434-32.720991-15.84923-62.37439-37.322381-89.982726-61.351859-24.029478-20.45062-48.058956-40.901239-70.554638-62.885655-25.052009-24.540744-49.081487-49.592753-73.110965-75.667293-16.871761-17.894292-32.720991-36.811115-48.058956-56.239204-19.939354-24.540744-37.833646-50.104018-51.126549-78.734885-9.714044-20.961885-15.84923-42.946301-12.781638-66.464514 2.045062-16.360496 8.180248-29.653398 19.939354-41.412505 14.826699-15.337965 30.164664-30.675929 44.480098-47.036425 10.22531-11.247841 17.894292-25.052009 15.337965-40.901239-2.556327-14.315434-7.668982-28.630867-13.804168-41.412505-10.736575-21.984416-25.052009-41.412505-40.90124-60.329328-13.804168-16.871761-28.119602-33.232257-46.525159-44.991363-12.270372-7.668982-25.563275-12.781637-40.389974-9.714044-20.45062 4.090124-36.29985 16.871761-51.126549 30.675929-14.315434 13.292903-27.608336 27.097071-41.412505 41.412505-6.646451 6.646451-13.804168 13.292903-17.894292 21.473151-10.22531 14.315434-11.759106 31.187195-11.759106 48.058956z" fill="#1296db" p-id="8552"></path></svg><svg v-else t="1589953816116" class="wewhat" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8143" width="16" height="16"><path d="M679.538761 615.349833c-16.619516-4.456498-42.016953 23.685445-42.016953 23.685445-8.117888 8.117888-15.487739 21.817911-21.99699 36.363186-10.400884 23.242354-39.557948 31.860638-60.655452 17.602913-85.916788-58.06444-168.970366-141.340075-226.592738-227.297796-13.837146-20.641109-5.952572-48.862871 16.253172-60.016909 20.278859-10.18599 39.021735-20.033265 39.021735-20.033265l-0.152473-0.508583c13.866822-6.311753 21.666462-21.914102 17.600867-37.090756 0 0-116.005061-284.032962-149.172461-284.032962-103.732549 0-187.845249 84.1127-187.845249 187.845249 0 23.793916 4.590552 46.334281 12.730952 67.206658 87.034239 302.014498 324.763618 539.5341 626.778116 626.778116 20.871353 8.140401 43.621497 12.730952 67.415412 12.730952 103.731526 0 189.410907-79.103616 189.410907-182.836165C960.317609 775.745916 817.401642 670.753677 679.538761 615.349833z" p-id="8144" fill="#1296db"></path></svg> {{tel}}</span>
                        </span>
                    </div>
                </div>

                <!-- 未选中时的服务商列表-->
                <div class="provider" v-if="haslength">
                    <div class="joinprovider" v-if="serviceArr">参与该需求的服务商({{total}})</div>
                    <div class="img-content" v-for="(item,ind) in serviceArr" :key="ind">
                        <div class="imgs"><img class="pictire" v-if="item.bidResources" :src="`${basefile}${item.shopLogo}`" alt=""></div>
                        <div class="contens">
                            <div class="birdeTitle">
                                <h4 class="birdes">{{item.createUserName}}</h4>
                                <img class="img-qy" src="~/static/img/qd/qy.png" alt="" v-if="item.createUserRole==='ENTERPRISE'&&item.shopEnterpriseCertification">
                                <img class="img-qy" src="~/static/img/qd/geren.png" alt="" v-if="item.createUserRole==='PERSON'">
                                <span class="ping">评</span><span class="num">{{item.shopTotalScore}}</span>
                                <h4 class="flrt">申请日期  {{item.bidTime}}</h4>
                            </div>
                            <p class="cont-font" v-if="item.shopDesc">{{item.shopDesc}}</p>
                            <div class="cont-foot">
                                <span class="ordinarys">已服务雇主 <i class="ifonts"> {{item.shopServiceOrderNo}}家 </i></span>
                                <span class="ordinarys"> 成交额 <i class="ifonts"> {{item.totalTransactionAmount}}元 </i></span>
                                <span class="span-btn-item" @click="open53Server" style="float:right;margin-right:10px;">
                                    <i class="icon icon-weixin_hover"></i>
                                    <i class="icon icon-weixin"></i>
                                    联系TA
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="block" style="margin:0px auto; text-align: center;padding:30px 0 80px 0;">
                        <el-pagination
                            background
                            class="public-page"
                            layout="prev, pager, next"
                            :current-page="page"
                            @current-change="handleCurrentChange"
                            :page-size="5"
                            :total="total">
                        </el-pagination>
                    </div>
                </div>
            </div>

            <!-- 选中时候的状态 -->
            <div v-else>
                <div class="providers">
                    <div class="serviceProvider">
                        该服务商为雇主解决需求
                    </div>
                    <div class="img-contents">
                        <div class="img-sel"><img src="~/static/img/qd/slt.png" alt=""></div>
                        <div class="imgs-el"><img class="pictire-el" v-if="obj.bidResources" :src="`${basefile}${obj.shopLogo}`" alt=""></div>
                        <div class="contens-el">
                            <div class="birdeTitles">
                                <h4 class="birdes">{{obj.shopName}}</h4>
                                <img class="img-qy" src="~/static/img/qd/qy.png" alt="" v-if="obj.createUserRole==='ENTERPRISE'">
                                <img class="img-qy" src="~/static/img/qd/geren.png" alt="" v-if="obj.createUserRole==='PERSON'">
                                <span class="ping">评</span><span class="num">{{obj.shopTotalScore}}</span>
                            </div>
                            <div class="cont-font">
                                <span>品牌介绍： </span> <span> {{obj.bidSchemeDescription}}</span>
                            </div>
                            <div class="cont-foots">
                                <span class="ordinarys">已服务雇主 <i class="ifonts"> {{obj.shopServiceOrderNo}}家 </i></span><span class="ordinarys"> 成交额 <i class="ifonts"> {{tofloat(obj.totalTransactionAmount)}} </i></span>
                                <span class="span-btn-item" style="float:right;" @click="open53Server">
                                    <i class="icon icon-weixin_hover"></i>
                                    <i class="icon icon-weixin"></i>
                                    联系TA
                                </span>
                                <nuxt-link :to="`/qiao/s/shop/${obj.shopId}`" class="inshop">进店看看</nuxt-link>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="details">
                    <div class="anth-box">
                        <span class="authentication" v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'">能力服务</span>
                        <span class="authentication" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'" style="background-color: #a7cddc;">设备租赁</span>
                        <span class="authentication" v-if="listitem.supplyDemandType==='LABOR_FORCE'" style="background-color: #dbc1a4;">劳动力</span>
                        <span class="authentication" v-if="listitem.supplyDemandType==='OTHER_SERVICE'" style="background-color: #e3e3e3;">其他服务</span>
                        <span class="build-titles"><span>{{listitem.demandName}}</span> <span class="addre">{{listitem.demandLocationCity}} {{listitem.demandLocationProvince}}</span></span>
                        <collection :collectionSourceId="listitem.id" :classId="listitem.demandClassId" :collectionType="'DEMAND_NEEDS'" :shopType="'BPSC'">
                            <span slot-scope="isColl" class="span-btn-item staroff">
                                <i :class="`icon icon-collection${isColl.data ? '_hover' : ''}`"></i>
                                {{isColl.data ? '取消收藏' : '收藏服务'}}
                            </span>
                        </collection>
                        <shareTooltip class="share"></shareTooltip>
                    </div>
                    <div class="contents">
                        <span class="demainfo">详情:{{FILTER_FORMATER.wordNum(listitem.demandInfo,160)}}</span>
                    </div>
                    <div class="amount">
                        <span class="ordinary">预算金额 <i class="ifont"> {{tofloat(listitem.demandBudget)}} </i></span>
                        <span class="ordinary" v-if="listitem.supplyDemandType==='CAPABILITY_SERVICE'"> 期望工期 <i class="ifont"> {{listitem.expectedDuration}}天 </i></span>
                        <span class="ordinary" v-if="listitem.supplyDemandType==='EQUIPMENT_LEASING'"> 租赁时间 <i class="ifont"> {{listitem.createdDay + '至' + listitem.biddingDeadline}} </i></span>
                        <span class="ordinary" v-if="listitem.supplyDemandType==='LABOR_FORCE'"> 雇佣时间 <i class="ifont"> {{listitem.createdDay + '至' + listitem.biddingDeadline}} </i></span>
                        <!-- <span class="ordinary"> 期望工期 <i class="ifont"> {{listitem.expectedDuration}}天 </i></span> -->
                        <span class="flrt" style="color:#11a9e8;cursor: pointer;" @click="todownload" v-if="showdown">资料下载</span>
                    </div>
                    <div class="bidding">
                        <span>已完成</span>
                        <span class="flrt">{{listitem.createUserName}}  &nbsp; {{listitem.createDate}}</span>
                    </div>
                </div>
            </div>

            <!-- 底部的相似推荐 -->
            <div class="foot-content" v-if="likelistitem.length>0" v-loading="loading">
                <div class="recommend">
                    相似需求推荐
                </div>
                <div>
                    <el-row class="content-box">
                        <el-col v-for="(item,index) in likelistitem" :key="index" :span="7" class="content-father">
                            <div class="content-son">
                                <div class="house-day">
                                    <span class="sdays">{{item.relativePulishDate}}</span><span v-if="item.matchStatus==='FINISH'">已结束</span><span class="flspan">{{item.biddingRecords.length}}人参与</span>
                                </div>
                                <nuxt-link :to="`/qiao/d/detail/${item.id}`">
                                    <div class="build-titles">
                                        {{item.demandName}}
                                    </div>
                                </nuxt-link>
                                <div class="nearnum">
                                    {{FILTER_FORMATER.wordNum(item.demandInfo,38)}}
                                </div>
                                <!-- <div class="moneys">
                                    <span class="much">{{'￥'+item.demandBudget+''}}</span> <span> / </span> <span v-if="item.supplyDemandType==='CAPABILITY_SERVICE'" class="days">{{item.expectedDuration+'天'}}</span><span v-else-if="item.supplyDemandType==='CAPABILITY_SERVICE'">{{'剩余'+item.surplusDays+'天'}}</span><span v-else-if="item.supplyDemandType==='EQUIPMENT_LEASING'">{{item.createDate+'至'+item.biddingDeadline}}</span><span class="address"></span><span class="flrt-smile" v-if="item.demandLocationCity"> {{item.demandLocationCity.label}}</span><span class="flrt-smile" v-if="item.demandLocationProvince"> {{item.demandLocationProvince.label}} </span>
                                </div>
                                <div><span class="mybtn" @click="goDetail(item)">我要报价</span><span class="address"><i style="color:#11a9e8;" class="el-icon-service"></i> 联系TA</span></div> -->
                                <div class="cont-bos">
                                    <div class="moneys">
                                        <div class="much">￥{{tofloat(item.demandBudget)}}</div><div class="days"><span v-if="item.supplyDemandType==='CAPABILITY_SERVICE'" class="days">{{item.expectedDuration+'天'}}</span><span v-else-if="item.supplyDemandType==='CAPABILITY_SERVICE'">{{'剩余'+item.expectedDuration+'天'}}</span><span v-else-if="item.supplyDemandType==='EQUIPMENT_LEASING'">{{item.createDate+'至'+item.biddingDeadline}}</span><span class="addres"></span></div>
                                    </div>
                                    <div class="much-btn">
                                        <span class="mybtn" @click="handleBidding">我要报价</span>
                                    </div>
                                </div>
                                <div><span class="flrt-smile" v-if="item.demandLocationProvince"> {{item.demandLocationProvince.label}} </span><span class="flrt-smile" v-if="item.demandLocationCity"> {{item.demandLocationCity.label}}</span>
                                    <span class="span-btn-item" @click="open53Server" style="float:right;">
                                        <i class="icon icon-weixin_hover"></i>
                                        <i class="icon icon-weixin"></i>
                                        联系TA
                                    </span>
                                </div>
                            </div>
                            <div class="company">
                                {{FILTER_FORMATER.wordNum(item.createUserName,15)}}
                                <img class="img-qy" src="~/static/img/qd/qy.png" alt="" v-if="item.createUserRole==='ENTERPRISE'">
                                <img class="img-qy" src="~/static/img/qd/geren.png" alt="" v-if="item.createUserRole==='PERSON'">
                            </div>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
        <bidding
            v-if="isShowBidding"
            :bid-dialog-show="isShowBidding"
            :info="listitem"
            @dialogCallback="dialogCallback">
        </bidding>
        <validatUser :isFlag.sync="isFlag"></validatUser>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import {detailxqList, getOtherDemandNeeds, getSuppyPageList} from '~/api/servicehall/index'
import bidding from '~/components/demand/bidding.vue'
import collection from '~/components/common/collection.vue'
import qiaoNav from '~/components/common/qiaoNav.vue'
import {open53Server} from '~/method'
import shareTooltip from '~/components/common/shareTooltip.vue'
import validatUser from '~/components/common/validatUser.vue'
@Component({
    layout: 'qiao',
    name: 'DdetailIndex',
    head () {
        const that = this as any
        return {
            title: `${that.listitem.demandName}-供需中心-CIIP`,
            meta: [
                {hid: 'description', name: 'description', content: '找到自己可以提供服务的需求，给出你的报价吧，等待需方选中，即可提供服务了。'},
                {hid: 'keyword', name: 'keyword', content: '服务名称，(一级分类)，(二级分类)'}
            ]
        }
    },
    components: {
        bidding,
        collection,
        qiaoNav,
        shareTooltip,
        validatUser
    }
})
export default class DdetailIndex extends Vue {
    isShowBidding:boolean = false
    isFlag:boolean = false
    basefile: string = this.$store.state.basefile
    // isHover:boolean = true
    isHovers:boolean = true
    isShows:boolean = true
    showdown:boolean = false
    loading:boolean = false
    iszb:boolean = true
    tel:string = '获取电话'
    createdDay:string = ''
    total:number = 0
    page:number = 0
    ids:any = 0
    haslength:number = 0
    listitem: object = {}
    obj: object = {}
    likelistitem: any = []
    biddingRecords: any = []
    demandNeedsid: any = 0
    pageNumber: any = 1
    pageSize: any = 5
    serviceArr: any = []
    mounted () {
        this.detailxqList(this.$route.params.id)
        this.demandNeedsid = this.$route.params.id
        this.getSuppyPageList({demandNeedsId: this.demandNeedsid, pageNumber: this.pageNumber, pageSize: this.pageSize})
    }
    handleCurrentChange (val:any) {
        this.pageNumber = val
        this.getSuppyPageList({demandNeedsId: this.demandNeedsid, pageNumber: this.pageNumber, pageSize: this.pageSize})
    }
    async getSuppyPageList (obj:any) {
        const {data}:any = await getSuppyPageList(obj)
        if (data.code >= 0) {
            this.serviceArr = data.data.content
            this.total = data.data.totalElements
        }
    }
    async detailxqList (val:any) {
        const {data}:any = await detailxqList({id: val})
        if (data.code >= 0) {
            const info = data.data
            this.createdDay = info.createDate.substring(0, 10)
            info.createdDay = info.createDate.substring(0, 10)
            info.createdDay = info.createDate.substring(0, 10)
            info.demandHireEndTime = info.demandHireEndTime.substring(0, 10)
            info.demandHireStartTime = info.demandHireStartTime.substring(0, 10)
            info.demandLeaseEndTime = info.demandLeaseEndTime.substring(0, 10)
            info.demandLeaseStartTime = info.demandLeaseStartTime.substring(0, 10)
            info.demandLocationCity = (JSON.parse(info.demandLocationCity)).label
            info.demandLocationProvince = (JSON.parse(info.demandLocationProvince)).label
            info.nav = info.nav.replace('-', '>')
            if (info.demandResources.length > 0) {
                this.showdown = true
            }
            this.listitem = info
            this.haslength = info.biddingRecords.length
            this.getOtherDemandNeeds(info.demandClassId)
            const arr = info.biddingRecords
            this.total = info.biddingRecords.length
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].bidStatus === 'WON_THE_BID') {
                    this.obj = arr[i]
                    this.iszb = false
                }
            }
        }
    }
    async getOtherDemandNeeds (val:any) {
        this.loading = true
        const {data}:any = await getOtherDemandNeeds({clazzId: val, demandsId: this.demandNeedsid})
        if (data.code >= 0) {
            // console.log(data.data)
            for (let i = 0; i < data.data.content.length; i++) {
                if (data.data.content[i].createDate) {
                    data.data.content[i].createDate = data.data.content[i].createDate.substring(0, 10)
                    data.data.content[i].biddingDeadline = data.data.content[i].biddingDeadline.substring(0, 10)
                }
                if (data.data.content[i].demandLocationCity !== '') {
                    data.data.content[i].demandLocationCity = JSON.parse(data.data.content[i].demandLocationCity)
                }
                if (data.data.content[i].demandLocationProvince !== '') {
                    data.data.content[i].demandLocationProvince = JSON.parse(data.data.content[i].demandLocationProvince)
                }
            }
            this.likelistitem = data.data.content
            this.likelistitem = this.likelistitem.slice(0, 3)
            this.loading = false
            // console.log('更多', this.likelistitem)
        }
    }
    tofloat (val:any) {
        const num = parseFloat(val)
        let number = ''
        if (num < 10000) {
            number = (num / 1).toFixed(2) + '元'
        } else if (val === '') {
            number = '商议'
        } else {
            number = (num / 10000).toFixed(2) + '万元'
        }
        return number
    }
    todownload () {
        const that = this as any
        const obj = {
            id: that.listitem.demandResources[0].id,
            fileName: that.listitem.demandResources[0].fileName
        }
        that.downloadFile(obj)
    }
    gohosy () {
        this.$router.push('/qiao/d')
    }
    gohovers () {
        this.isHovers = false
    }
    dohovers () {
        this.isHovers = true
    }
    gettel (val:any) {
        if (this.$store.state.haslogin) {
            if (this.$store.state.userinfo.selectRoleType === 'ENTERPRISE' && this.$store.state.userinfo.ciipEnterpriseCertStatus === 'PASS') {
                this.tel = val
            } else if (this.$store.state.userinfo.selectRoleType === 'PERSON' && this.$store.state.userinfo.realStatus === 'REAL_STATUS_PASS') {
                this.tel = val
            } else {
                this.isFlag = true
            }
        } else {
            this.$message.warning('请先登录')
        }
    }
    handleBidding () {
        // 做未登录验证
        if (!this.$store.state.haslogin) {
            this.isShowBidding = false
            // this.dialogShow = true
            this.$message.warning('请先登录')
        } else {
            this.isShowBidding = true
        }
    }
    dialogCallback (flag: boolean) {
        this.isShowBidding = flag
    }
    open53Server () {
        open53Server()
    }
}
</script>
<style lang="scss" scoped>
.inshop {
    color: black;
     float:right;
     margin-left:10px;
     display: inline-block;
     cursor: pointer;
}
.containe{
    .cont-bos{
        display: flex;
    }
    .much-btn {
        height: 72px;
        line-height: 72px;
    }
    .flrt-smile {
        font-size: 14px;
        color: black;
    }
    .allClassification{
        font-size: 14px;
        height: 50px;
        line-height: 50px;
        width: 100%;
        .addcur{
            cursor: pointer;
        }
    }
    .details{
        width: 100%;
        // height: 330px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 15px;
    }
    .authentication{
            display: inline-block;
            width: 65px;
            height: 24px;
            line-height: 24px;
            background-color: #a9d2c9;
            color: #fff;
            font-size: 12px;
            text-align: center;
            margin-right: 20px;
            // margin-right: 5px;
    }
    .anth-box{
        height: 45px;
        line-height: 45px;
        width: 100%;
        // span{
        //     cursor: pointer;
        // }
    }
    .build-titles{
        font-size: 16px;
        width: 910px;
        display: inline-block;
        height: 24px;
        line-height: 24px;
        // display: -webkit-box;
        // -webkit-line-clamp: 1;
        // overflow: hidden;
        // line-break: normal;
        // -webkit-box-orient: vertical;
        .addre{
            color: #a29999;
            margin-left: 20px;
        }
    }
    .share{
        cursor: pointer;
    }
    .share:hover{
        cursor: pointer;
        color: #44b3e9;
    }
    .contents{
        font-size: 14px;
        color: #b6b6b6;
        .demainfo{
            display: inline-block;
            width: 100%;
            // max-height: 55px;
            min-height: 57px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            overflow: hidden;
            line-break: normal;
            -webkit-box-orient: vertical;
        }
        span {
            display: inline-block;
        }
    }
    .ordinary{
        font-size: 14px;
        margin-right: 40px;
        .ifont{
            // text-decoration: none;
            font-style: normal;
            color: #ff5a5a;
        }
    }
    .ordinarys{
        font-size: 14px;
        margin-right: 40px;
        color: #b6b6b6;
        .ifonts{
            font-size: 16px;
            // text-decoration: none;
            font-style: normal;
            color: black;
        }
    }
    .amount{
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #f3f5f7;
    }
    .bidding{
        width: 100%;
        height: 60px;
        line-height: 60px;
    }
    .flrt{
        display: inline-block;
        float: right;
        margin-right: 15px;
        color: #b6b6b6;
    }
    .offer{
        width: 100%;
        height: 40px;
        .span-btn-item{
                    font-size: 14px;
                    color: #666;
                    margin-left: 10px;
                    .icon{
                        margin-right: 4px;
                    }
                    .icon-weixin_hover{
                        display: none;
                    }
                    &:hover{
                        color: #11a9e8;
                        .icon-weixin_hover{
                            display: inline-block;
                        }
                        .icon-weixin{
                            display: none;
                        }
                    }
                }
    }
    .immediately{
        width: 120px;
        height: 36px;
        line-height: 36px;
        background-color: #11a9e8;
        color: #fff;
        border-radius: 4px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
    }
    .contact{
        cursor: pointer;
        font-size: 14px;
        padding-left: 20px;
    }
    .contacts{
        float: right;
        cursor: pointer;
        font-size: 14px;
        margin-right: 15px;
    }
    .wewhat{
        position: relative;
        top: 4px;
    }
    .provider{
        width: 100%;
        // height: 500px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 15px;
    }
    .providers{
        width: 100%;
        // height: 140px;
        background-color: #fff;
        // margin-bottom: 20px;
        padding: 15px;
        border-bottom: 1px solid #f3f5f7;
    }
    .foot-content{
        width: 100%;
        // height: 450px;
        background-color: #fff;
        margin-bottom: 20px;
        padding: 15px;
        .build-titles{
        font-size: 16px;
        width: 910px;
        display: inline-block;
        height: 24px;
        line-height: 24px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        overflow: hidden;
        line-break: normal;
        -webkit-box-orient: vertical;
        .addre{
            color: #a29999;
            margin-left: 20px;
        }
    }
    }
    .joinprovider{
        height: 30px;
        width: 100%;
        line-height: 30px;
    }
    .img-content{
        display: flex;
        padding-top: 20px;
    }
    .img-contents{
        position: relative;
        display: flex;
        background-color: #f4eddf;
        padding: 10px;
    }
    .imgs{
        width: 100px;
        height: 80px;
        background-color: #fff;
    }
    .imgs-el{
        width: 100px;
        height: 80px;
        background-color: #f4eddf;
    }
    .contens{
        flex: 1;
        // display: flex;
        // flex-direction: column;
        background-color: #fff;
    }
    .contens-el{
        flex: 1;
        display: flex;
        flex-direction: column;
        // background-color: #fff;
    }
    .birdeTitle{
        // height: 40px;
        // width: 100%;
    }
    .birdeTitle {
        width: 100%;
        height: 20px;
        line-height: 20px;
        .ping{
            margin-left: 5px;
            background-color: #ffefdb;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
        }
        .num{
            width: 36px;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
            border-left-width: 0px;
        }
        img, span{
            display: inline-block;
            vertical-align: middle;
        }
    }
    .birdeTitle span{
        font-size: 10px;
        width: 18px;
        height: 18px;
        line-height: 18px;
    }
    .birdeTitles span{
        font-size: 10px;
        width: 18px;
        height: 18px;
        line-height: 18px;
    }
    .birdeTitles{
        height: 30px;
        width: 100%;
        .ping{
            margin-left: 5px;
            background-color: #ffefdb;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
        }
        .num{
            width: 36px;
            color: #f5c697;
            text-align: center;
            border-radius: 2px;
            border: 1px solid #ffad4d;
            border-left-width: 0px;
        }
        img, span{
            display: inline-block;
            vertical-align: middle;
        }
    }
    .cont-font{
        font-size: 14px;
        color: #b6b6b6;
        height: 40px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        line-break: normal;
        -webkit-box-orient: vertical;
    }
    .cont-foot{
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #f3f5f7;
    }
    .cont-foots{
        width: 100%;
        height: 30px;
        line-height: 40px;
        // border-bottom: 1px solid #f3f5f7;
    }
    .birdes{
        font-size: 15px;
        display: inline-block;
    }
    .pictire{
        width: 80px;
        height: 80px;
    }
    .pictire-el{
        width: 80px;
        height: 80px;
    }
    .recommend{
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }
    .elrow{
        width: 100%;
        height: 52px;
        line-height: 52px;
        background-color: #e3e3e3;
        border-radius: 4px;
        span {
            cursor: pointer;
        }
    }
    .f-box{
        position: relative;
    }
    .f-boxr{
        // position: relative;
    }
    .flleft{
        z-index: 2;
        position: absolute;
        left: 10px;
        color: #11a9e8;
        font-weight: 700;
        font-size: 20px;
    }
    .fllerg{
        z-index: 2;
        position: absolute;
        right: 50px;
        color: #11a9e8;
        font-size: 14px;
        font-weight: 700;
    }
    .fllefts{
        z-index: 2;
        position: absolute;
        right: 200px;
        font-size: 16px;
        color: #333333;
    }
    .fllergs{
        z-index: 2;
        position: absolute;
        right: 30px;
        font-size: 14px;
        color: #666666;
    }
    .content-body{
        cursor: pointer;
        min-height: 100px;
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        margin: 20px auto;
    }
    .allification{
        color: #11a9e8;
    }
    .firstLine{
        display: flex;
        width: 100%;
        height: 56px;
        line-height: 56px;
    }
    .firstLine>span{
        width: 100px;
        text-align: center;
        font-size: 14px;
    }
    .line{
        width: 96%;
        height: 1px;
        background-color: #f3f5f7;
        margin-left: 2%;
    }
    .content-box{
        // width: 390px;
        // width: 100%;
        // height: 338px;
        border-radius: 4px;
        // display: flex;
        // justify-content: space-between;
        // flex-direction: row;
        // flex-wrap: wrap;
        // float: left;
        .img-qy{
            position: relative;
            top: 7px;
        }
        .content-father{
            border: 1px solid #eeeeee;
            // width: 32.5%;
            background-color: #fff;
            margin: 23px;
        }
        .content-father:hover{
            border: 1px solid #eeeeee;
            // width: 32.5%;
            background-color: #fff;
            margin: 23px;
            box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        }
        .content-son{
            // display: flex;
            // flex-direction: column;
            // border: 1px solid #ccc;
            width: 344px;
            height: 270px;
            // width: 100%;
            margin: 0 auto;
            padding: 20px;
        }
        .authentication{
            display: inline-block;
            width: 65px;
            height: 24px;
            line-height: 24px;
            background-color: #a9d2c9;
            color: #fff;
            font-size: 12px;
            text-align: center;
            // margin-right: 5px;
        }
        .house-day{
            border-bottom: 1px solid #f3f5f7;
        }
        .house-day>span{
            display: inline-block;
            height: 40px;
            // width: 70px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            // margin-left: -5px;
            margin-right: 10px;
            color: #b6b6b6;
            .sdays{
                // margin-right: 30px!important;
            }
        }
        .flspan{
            float: right;
        }
        .build-titles{
            width: 100%;
            height: 54px;
            line-height: 54px;
            color: black;
            // text-align: center;
        }
        .nearnum{
            color: #b6b6b6;
            width: 100%;
            height: 42px;
            font-size: 14px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .moneys{
            width: 100%;
            color: black;
            // height: 72px;
            // line-height: 72px;
        }
        .much{
            color: #ff5a5a;
            font-size: 22px;
            height: 30px;
            height: 36px;
            line-height: 36px;
        }
        .days{
            color: black;
            font-size: 14px;
            height: 26px;
            line-height: 26px;
        }
        // .address{
        //     color: black;
        //     float: right;
        //     margin-right: 15px;
        //     font-size: 16px;
        // }
        .span-btn-item{
                    font-size: 14px;
                    color: #666;
                    margin-left: 10px;
                    .icon{
                        margin-right: 4px;
                    }
                    .icon-weixin_hover{
                        display: none;
                    }
                    &:hover{
                        color: #11a9e8;
                        .icon-weixin_hover{
                            display: inline-block;
                        }
                        .icon-weixin{
                            display: none;
                        }
                    }
                }
        .addres{
            // float: right;
            color: black;
            margin-right: 15px;
            font-size: 16px;
        }
        .mybtn{
            width: 100px;
            height: 32px;
            background-color: #fff;
            color: #6cc1ee;
            border: 2px solid #6cc1ee;
            display: inline-block;
            line-height: 32px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }
        .mybtn:hover{
            width: 100px;
            height: 32px;
            background-color: #6cc1ee;
            color: #fff;
            border: 2px solid #6cc1ee;
            display: inline-block;
            line-height: 32px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
        }
        .company{
            color: black;
            width: 100%;
            height: 50px;
            background-color: #f3fbfe;
            border-radius: 0px 0px 4px 4px;
            margin-top: 24px;
            line-height: 50px;
            padding-left: 40px;
        }
    }
    .serviceProvider{
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        color: #5ec7ac;
        font-size: 22px;
        font-weight: 700;
    }
    .img-sel{
        position: absolute;
        right: 15px;
        top: -40px;
    }
}
.span-btn-item{
                    font-size: 14px;
                    color: #666;
                    margin-left: 10px;
                    .icon{
                        margin-right: 4px;
                    }
                    .icon-weixin_hover{
                        display: none;
                    }
                    &:hover{
                        color: #11a9e8;
                        .icon-weixin_hover{
                            display: inline-block;
                        }
                        .icon-weixin{
                            display: none;
                        }
                    }
                }
</style>
